<template>
  <div>
    <div class="main">
      <header><h1>智慧商城</h1></header>
      <!-- <div class="search"> -->
      <van-search v-model="value" />
      <!-- </div> -->
      <van-swipe :autoplay="2000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
      <van-notice-bar
        left-icon="volume-o"
        :scrollable="true"
        background="#f2dbdb"
        text="智慧商城2.0全新上线，更多新品等你来选~"
      />
      <van-grid :column-num="5" :border="false">
        <van-grid-item
          v-for="(value, index) in navIndex"
          :key="index"
          :icon="value.imgUrl"
          :text="value.text"
        />
      </van-grid>
      <div class="banner">
        <img src="@/assets/banner.png" alt="" />
      </div>
      <!-- item -->
      <div class="like">—— 猜你喜欢 ——</div>
      <van-card
        v-for="(item, index) in shopIndex"
        :key="index"
        num="1"
        :price="item.goods_price_max"
        :desc="`以售${item.goods_sales}件`"
        :title="item.goods_name"
        :thumb="item.goods_image"
        :origin-price="item.line_price_max"
      />
    </div>
  </div>
</template>

<script>
import { indexTo } from "@/api/indexx";
export default {
  data() {
    return {
      value: "",
      images: [],
      navIndex: [],
      shopIndex: [],
    };
  },
  async created() {
    const res = await indexTo();
    console.log(res.data.pageData.items);
    this.navIndex = res.data.pageData.items[3].data;
    this.shopIndex = res.data.pageData.items[6].data;
    this.images = res.data.pageData.items[1].data.map((item) => item.imgUrl);
  },
};
</script>
<style lang="less" scoped>
.main {
  padding-top: 11.7333vw;
  padding-bottom: 13.3333vw;
  header {
    width: 100vw;
    height: 11.7333vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #c21401;
    text-align: center;
    line-height: 11.7333vw;
    h1 {
      font-size: 4.2667vw;
      color: #fff;
    }
  }
  .lunbotu {
    height: 49.0667vw;
    background-color: pink;
  }
  .banner {
    height: 35.2vw;
    padding: 1.8667vw 0;
    background-color: #fff;
  }

  // item
  .like {
    height: 7.7867vw;
    padding: 1.3333vw 0;
    background-color: #fff;
    font-size: 3.7333vw;
    text-align: center;
    line-height: 6.24vw;
    border-bottom: 1px solid #f6f6f6;
  }
}
</style>
